<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator"%>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="pages"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ page isELIgnored="false"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title><s:text name="search.title" /></title>
	<link type="text/css" href="css/forms.css" rel="stylesheet" />	

	<link type="text/css" href="jquery/ui/css/smoothness/jquery-ui-1.8.1.custom.css" rel="stylesheet" />	
	<script type="text/javascript" src="jquery/ui/jquery-ui-1.8.2.custom.min.js"></script>
	<script type="text/javascript" src="jquery/dropdown-check-list/ui.dropdownchecklist-min.js"></script>

	<!-- jQuery dataTables -->
	<script src="jquery/jqGrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
	<script src="jquery/jqGrid/jquery.jqGrid.min.js" type="text/javascript"></script>
	<link type="text/css" href="jquery/jqGrid/css/ui.jqgrid.css" rel="stylesheet" />	


	<script type="text/javascript" language="javascript">
		jQuery(document).ready(function(){
			/*jQuery("[multiple='multiple']").dropdownchecklist();*/

			jQuery("form input,textarea,select").focus(function() {
				if(!jQuery(this).parent().hasClass('error')) jQuery(this).parent().addClass("active");
			});
			jQuery("form input,textarea,select").blur(function() {
				if(!jQuery(this).parent().hasClass('error')) jQuery(this).parent().removeClass("active");
			});

		});
	</script>
</head>
<body>
	<s:set name="longDateFormat"><s:text name="dateformat.jquery.long.sanstime" /></s:set>
	<div class="contentContent">
		<div class="contentBox search">
			<div class="contentBoxHeader">&nbsp;</div>
			<div class="contentBoxContent">
				<div class="contentBoxContentIcon">&nbsp;</div>
				<div class="contentBoxContentText">
					<span class="username"><s:text name="search.searchLabel" /></span>
					<span class="date">
						<a href="#" onclick="return toggleSearchPanel()"><span class="down">&nbsp;</span></a>
					</span>
					
					<span id="contentSpan" class="content" <c:if test="${wasSearch==0}">style="display: none"</c:if> >
						<s:form theme="simple" name="formSearch" action="search" namespace="%{namespace}" method="post">
							<ul class="formList">
								<s:hidden name="wasSearch" value="1" />
								<li >
									<s:label required="true" value="%{getText('project.item.nameOrDescription')}" />
									<s:textfield name="item.nameOrDescription" required="true" />
								</li>	
								<li>
									<s:label value="%{getText('project.item.status')}" />
									<div class="input">
										<a href="javascript:selectAll('statusIds')"><s:text name="project.item.selectAll" /></a><br />
										<s:select name="statusIds" list="statusesList" listKey="id" listValue="%{getText(label)}" headerKey="0" multiple="true" value="item.statuses.{id}" />
									</div>
								</li>
				   				<li>
									<s:label value="%{getText('project.item.creators')}" />
									<div class="input">
										<a href="javascript:selectAll('creatorsIds')"><s:text name="project.item.selectAll" /></a><br />
										<s:select name="creatorsIds" list="usersList" listKey="id" listValue="userName" headerKey="0" multiple="true" value="item.creators.{id}"  />
									</div>										
								</li>
				   				<li>
									<s:label value="%{getText('project.item.users')}" />	
									<div class="input">
										<a href="javascript:selectAll('usersIds')"><s:text name="project.item.selectAll" /></a><br />
										<s:select name="usersIds" list="usersList" listKey="id" listValue="userName" headerKey="0" multiple="true" value="item.users.{id}" />
									</div>
								</li>
				   				<li>
									<s:label value="%{getText('project.item.supervisors')}" />	
									<div class="input">
										<a href="javascript:selectAll('supervisorsIds')"><s:text name="project.item.selectAll" /></a><br />
										<s:select name="supervisorsIds" list="usersList" listKey="id" listValue="userName" headerKey="0" multiple="true" value="item.supervisors.{id}" />
									</div>
								</li>
				   				<li>
									<s:label value="%{getText('project.item.categories')}" />	
									<div class="input">
										<a href="javascript:selectAll('categoriesIds')"><s:text name="project.item.selectAll" /></a><br />
										<s:select name="categoriesIds" list="categoriesList" listKey="id" listValue="%{getText(label)}" headerKey="0" multiple="true" value="item.categories.{id}" />
									</div>
								</li>

				   				<li>
									<s:label value="%{getText('project.item.createdAt')}" />	
									<s:textfield name="createFrom" cssClass="datepicker"  />
									<s:textfield name="item.createTo" cssClass="datepicker" />
								</li>

				   				<li>
									<s:label value="%{getText('project.item.lastUpdate')}" />	
									<s:textfield name="item.lastUpdateFrom" cssClass="datepicker" />
									<s:textfield name="item.lastUpdateTo" cssClass="datepicker" />
								</li>

								<li class="submit">
									<input name="submit" type="submit" value="<s:text name="search.submit"/>" />
								</li>
							</ul>									
					    </s:form>
					</span>
				</div>			
				<div class="globalWrap">&nbsp;</div>
			</div>
			<div class="contentBoxFooter">&nbsp;</div>
		</div>
	</div>

	<!-- *********************************** -->
	<!-- 		Search results table 		 -->
	<!-- *********************************** -->
	<jsp:include page="../_includes/projectDataGrid.jsp" />
	
	<div>
		<div id="dataDiv" style="overflow hidden;" >
			<table id="dataTable" class="expireHandler"></table>
		</div>
	
		<script type="text/javascript">
			jQuery("#dataTable").jqGrid({
				datatype: 'json',
				ajaxGridOptions:{
		            type: "POST",
		            url: 'projectSearch/jsonShowProjects?columns=${dataGrid.cols}',
		        },
			    beforeRequest: function() {
				    var postData = jQuery(this).getGridParam('postData');
				    var formData = jQuery("form[name='formSearch']").serializeArray()
				    jQuery(formData).each(function(){
							jQuery(postData).attr(this.name, this.value);
					});
		        },			        
			    colNames:${dataGrid.colNames},
			    colModel :${dataGrid.colModel},
			    sortname: 'number',
			    sortorder: "desc",
			    imgpath: 'themes/basic/images',
			    scrollOffset: 0,
			    width: 650,
			    autoheight: true,
			    shrinkToFit:false,
			    autowidth: true,
		    	onSelectRow: function(id){
					window.location.pathname="/todo/project/showProject#projectNumber="+id;
		    	}
			});
		</script>
	
	</div>

	<script type="text/javascript" language="javascript">
		function selectAll(name) {
			if(jQuery("select[name='"+name+"'] > option:selected").length > 0) {
				jQuery("select[name='"+name+"'] > option").removeAttr('selected');
			} else {
				jQuery("select[name='"+name+"'] > option").attr('selected','selected');
			}
			
		}
		
		function toggleSearchPanel() {
			jQuery("#contentSpan").toggle("blind", {}, 1000);
			return false;
		}
		
		jQuery(document).bind('documentReady',function() {
			jQuery(".datepicker").datepicker({dateFormat: '${longDateFormat}'});
		});
	</script>
</body>	